﻿@{
    ViewBag.Title = "基站详情";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国铁塔油机管理系统-@ViewBag.Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/Content/css/frozenui.css">
    <link rel="stylesheet" href="~/Content/css/style.css">
    <link rel="stylesheet" href="~/Content/css/swiper.min.css">
    <link href="~/Content/css/aui.css" rel="stylesheet" />
    <link href="~/Content/css/weui.1.1.2min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/Content/css/weui.min.css">
    <link rel="stylesheet" href="~/Content/css/jquery-weui.min.css">
    <script src="~/Content/script/jquery-3.3.1.min.js"></script>
    <script src="~/Content/script/jquery-1.11.0.min.js"></script>
    <script src="~/Content/script/jquery-weui-1.2.1.min.js"></script>
    <script src="~/Content/script/weui1.1.3.min.js"></script>
    <script src="~/Content/script/swiper.min.js"></script>

    <script src="~/Content/script/Uitls.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            position: relative;
            height: 100%;
        }

        li, a {
            list-style: none;
            text-decoration: none;
        }

        .swiper-container {
            width: 100%;
        }

        #nav {
            background: #fff;
        }

            #nav .swiper-wrapper {
                box-sizing: border-box;
                margin: 0;
                line-height: 1.6rem;
            }

            #nav li {
                text-align: center;
                color: #424242;
                font-size: 0.63rem;
            }

                #nav li span {
                    color: #3597D9;
                }

            #nav .active-nav {
                color: #2ECA70;
                border-bottom: 2px solid #2ECA70;
            }

                #nav .active-nav span {
                    color: #2ECA70;
                }



        #page {
            position: absolute;
            top: 1.68rem;
            left: 0;
            right: 0;
            bottom: 1.6rem;
            overflow: hidden;
        }

            #page .swiper-slide {
                text-align: center;
                overflow-y: scroll;
                position: relative;
                padding-top: 5px;
                box-sizing: border-box;
            }

        #tableHeader {
            height: 1.6rem;
        }

            #tableHeader table {
                width: 100%;
                height: 1.6rem;
                color: #fff;
                font-size: 0.6rem;
            }

                #tableHeader table tr th {
                    text-align: center;
                }

                #tableHeader table th:nth-child(even) {
                    background: #4FC2A1;
                }

                #tableHeader table th:nth-child(odd) {
                    background: #334960;
                }

        #content {
            position: absolute;
            top: 1.6rem;
            left: 0;
            right: 0;
            bottom: 0;
            overflow-y: scroll;
        }

        #page table {
            background: #fff;
            width: 100%;
        }

            #page table tr:nth-child(even) {
                background: #F8F8F8;
            }

        #page tr td {
            font-size: 0.64rem;
            color: #000;
            padding: 10px 0;
            font-family: "微软雅黑";
        }

            #page tr td:nth-child(1), #page tr td:nth-child(2) {
                width: 30%;
            }

            #page tr td:nth-child(3), #page tr td:nth-child(4) {
                width: 20%;
            }

        #footer {
            position: absolute;
            height: 1.6rem;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            margin: 0;
            background-color: #00bcd4;
        }

            #footer .ui-btn-primary {
                height: 1.6rem;
                width: 100%;
                line-height: 1.6rem;
                font-size: 0.68rem;
            }
    </style>
</head>
<body>



    <div id="nav" class="swiper-container">
        <ul class="swiper-wrapper">
            <li style="width:100%;color:#2ECA70;border-bottom:2px solid #2ECA70"><label id="Title" style="font-weight:400;font-size:16px">详情</label></li>
        </ul>
    </div>

    <div class="swiper-container" id="page">
        <div class="swiper-wrapper">

            <div class="swiper-slide slidepage">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td>基站名称:</td>
                        <td class="aui-text-info"><span id="BaseStationName"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>所属区域:</td>
                        <td class="aui-text-info"><span id="AreaName"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>运营商:</td>
                        <td class="aui-text-info"><span id="BaseStationType"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>基站级别:</td>
                        <td class="aui-text-info"><span id="BaseStationLevel"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>运维系统编码:</td>
                        <td class="aui-text-info"><span id="BaseStationTTCode"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>地址:</td>
                        <td class="aui-text-info"><span id="Address"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>经度:</td>
                        <td class="aui-text-info"><span id="Latitude"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>纬度:</td>
                        <td class="aui-text-info"><span id="Longitude"></span></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="aui-text-info"></td>
                        <td><button class="aui-text-info" style="background:#03a9f4;" id="openmap"><span style="color:white">查看地图</span></button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <section class="ui-container actionOne">
        <section id="actionsheet">
            <div class="demo-item">
                <div class="demo-block">
                    <div class="ui-actionsheet" id="actionsheet1">
                        <div class="ui-actionsheet-cnt am-actionsheet-down">
                            <h4>选择操作菜单</h4>
                            <button id="returnList">返回列表</button>
                            <div class="ui-actionsheet-split-line"></div>
                            <button id="cancel">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <div class="ui-btn-wrap" id="footer">
        <button class="ui-btn-primary">
            操作
        </button>
    </div>
    <script src="~/Content/script/jweixin-1.4.0.js"></script>
    <script>
        var BaseStationCode = GetRequest()['BaseStationCode'];//拿到参数GenRecordId
        console.log(BaseStationCode);
        var latitude, longitude, BaseStationName;
        getBaseStation();//初始化



        //获取Detail传过来的参数
        function GetRequest() {
            var url = location.search; //获取url中"?"符后的字串
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                }
            }
            return theRequest;
        }



        (function (designWidth, maxWidth) {
            var html = document.getElementsByTagName("html")[0];
            var tid;
            function refreshRem() {
                var width = html.getBoundingClientRect().width;
                html.style.fontSize = width / 15 + "px"
            }
            window.addEventListener("resize", function () {
                clearTimeout(tid); //防止执行两次
                tid = setTimeout(refreshRem, 300);
            }, false);
            refreshRem();
        })();


        (function (doc, win) {

            var size = 10;
            var myNav = new Swiper('#nav', {
                spaceBetween: 10,
                slidesPerView: 3,//控制单屏显示的slider的数量
                watchSlidesProgress: true,
                watchSlidesVisibility: true,
                on: {
                    tap: function () {
                        myPage.slideTo(myNav.clickedIndex)
                    }
                }
            });

            var myPage = new Swiper('#page', {
                on: {
                    slideChangeTransitionStart: function () {
                        updateNavPosition()
                    }
                }
            });

            function updateNavPosition() {
                $('#nav .active-nav').removeClass('active-nav');
                var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
                if (!activeNav.hasClass('swiper-slide-visible')) {

                    if (activeNav.index() >= myNav.activeIndex) {
                        var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                        myNav.slideTo(activeNav.index() - thumbsPerNav)
                    } else {
                        myNav.slideTo(activeNav.index())
                    }
                }
            }

            $("#footer").click(function () {
                $('.ui-actionsheet').addClass('show');

            });

            $("#cancel").click(function () {
                $(".ui-actionsheet").removeClass("show");
            });

            $("#goBack").click(function () {

                window.history.back()
            })

        })(document, window);


        //微信jdk
        $.ajax({
            url: '/WeiXin/JsapiTicketSignature?fullUrl=' + window.location.href + '',
            type: 'get',
            //beforeSend: function () {
            //    $.showLoading("加载中...");
            //},
            success: function (data) {
                //$.hideLoading();
                var result = eval(data);
                // wx.config成功后才会触发wx.ready
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: result.appId, // 必填，公众号的唯一标识
                    timestamp: result.timestamp, // 必填，生成签名的时间戳
                    nonceStr: result.nonceStr, // 必填，生成签名的随机串
                    signature: result.signature,// 必填，签名
                    jsApiList: ["openLocation", "getLocation"] // 必填，需要使用的JS接口列表
                });
            }
        });
        wx.ready(function () {
            $("#openmap").click(function () {
                wx.openLocation({
                    latitude: parseFloat(wgs84togcj02(longitude, latitude)[1]), // 纬度，浮点数，范围为90 ~ -90
                    longitude: parseFloat(wgs84togcj02(longitude, latitude)[0]), // 经度，浮点数，范围为180 ~ -180。
                    name: '基站位置', // 位置名
                    address: '基站名称:' + BaseStationName, // 地址详情说明
                    scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
                    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
                });
            })
        })


        //GPS坐标转火星坐标   用于腾讯地图
        var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
        var PI = 3.1415926535897932384626;
        var a = 6378245.0;
        var ee = 0.00669342162296594323;

        function wgs84togcj02(lng, lat) {
            if (out_of_china(lng, lat)) {
                return [lng, lat]
            }
            else {
                var dlat = transformlat(lng - 105.0, lat - 35.0);
                var dlng = transformlng(lng - 105.0, lat - 35.0);
                var radlat = lat / 180.0 * PI;
                var magic = Math.sin(radlat);
                magic = 1 - ee * magic * magic;
                var sqrtmagic = Math.sqrt(magic);
                dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
                dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
                var mglat = lat + dlat;
                var mglng = lng + dlng;
                return [mglng, mglat]
            }
        }


        @*/**
            * 判断是否在国内，不在国内则不做偏移
            * @param lng
            * @param lat
            * @returns {boolean}
        */*@
        function out_of_china(lng, lat) {
            return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);
        }

        function transformlat(lng, lat) {
            var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
            ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
            ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
            return ret
        }

        function transformlng(lng, lat) {
            var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
            ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
            ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
            ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
            return ret

        }

        //获取基站详情
        function getBaseStation() {
            try {
                $.ajax({
                    url: '/api/info/GetBaseStationById?BaseStationCode=' + BaseStationCode + '',
                    type: 'get',
                    success: function (data) {
                        console.log(data);
                        var res = data.Data;
                        if (res.Code == 1) {
                            $("#Title").text(res.Result.BaseStationName ? res.Result.BaseStationName : '');
                            $("#BaseStationName").text(res.Result.BaseStationName ? res.Result.BaseStationName : '');
                            $("#AreaName").text(res.Result.AreaName ? res.Result.AreaName : '');
                            $("#BaseStationType").text(res.Result.BaseStationType ? res.Result.BaseStationType : '');
                            $("#BaseStationLevel").text(res.Result.BaseStationLevel ? res.Result.BaseStationLevel : '');
                            $("#BaseStationTTCode").text(res.Result.BaseStationTTCode ? res.Result.BaseStationTTCode : '');
                            $("#Address").text(res.Result.Address ? res.Result.Address : '');
                            $("#Latitude").text(res.Result.Latitude ? res.Result.Latitude : '');
                            $("#Longitude").text(res.Result.Longitude ? res.Result.Longitude : '');
                            latitude = res.Result.Latitude;
                            longitude = res.Result.Longitude;
                            BaseStationName = res.Result.BaseStationName;
                        }
                    }
                }
	            );
            }
            catch (e) {
                //setTimeout(function () {
                //    getRealData();
                //}, 3000);
            }
        };




        //返回列表
        $("#returnList").click(function () {
            location.href = "/BaseStation/Index";
        });
    </script>
</body>
</html>
